<template>
    <div class="stat-card">

    <h1 class="card-title">
        {{ title }}
    </h1>

        <div class="card-content">
            <div class="current-data">
                <h1 class="unit">本期({{ unit }})</h1>
                {{ (currentData !== null && currentData !== undefined) ? currentData : '-' }}
            </div>
            <div class="previous-data">
                <h1 class="unit">上期({{ unit }})</h1>
                {{ (previousData !== null && previousData !== undefined) ? previousData : '-' }}
            </div>
        </div>
    </div>
</template>
<script>
export default {
  props: {
    title: String,
    currentData: Number,
    previousData: Number,
    unit: String
  }
};
</script>
<style lang="scss">
$margin: 40px;
.stat-card {
  width: calc(50% - 50px);
  height: 210px;
  border-radius: 8px;
  background-color: #fff;
  margin-bottom: 50px;

  .card-title {
    font-size: 16px;
    color: #606265;
    font-weight: 400;
    margin-top: 24px;
    margin-left: 27.5px;
  }

  .card-content {
    display: flex;
    flex-direction: row;
    margin-top: 40px;

    .current-data,
    .previous-data {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      flex: 1;
      height: 100%;
      font-size: 30px;

      .unit {
        font-size: 14px;
        color: #bcbcbc;
        margin-bottom: 25px;
      }

      &.current-data {
        color: #409eff;
      }
      &.previous-data {
        color: #ff9140;
      }
    }
  }
}
</style>
